import React, { Component, PropTypes } from 'react';
import { LinearProgress } from 'material-ui';

class PhaseProgress extends Component {
  render() {
    const { nowNo, endNo, color, height, bgColor } = this.props;
    return (
      <div className="PhaseProgress" >
        <LinearProgress mode="determinate" value={(nowNo / endNo) * 100} color={color} style={{ height: `${height}px`, backgroundColor: bgColor }} />
      </div>
    );
  }
}

/*PhaseProgress.propTypes = {
  nowNo: PropTypes.number.isRequired,
  endNo: PropTypes.number.isRequired,
  color: PropTypes.string,
  height: PropTypes.number,
  bgColor: PropTypes.string,
}*/

PhaseProgress.defaultProps = {
  nowNo: 1,
  endNo: 15,
  color: '#0e7cdc',
  height: 5,
  bgColor: '#badcf4',
}

export default PhaseProgress
